<!-- From Uiverse.io by Shubh0408  - Tags: input, text animation, animated, input effect , click animation -->
<div class="flex flex-col-reverse">
  <input
    placeholder="Enter detail"
    class="peer outline-none border pl-2 py-1 duration-500 border-black focus:border-dashed relative placeholder:duration-500 placeholder:absolute focus:placeholder:pt-10 focus:rounded-md"
    type="text"
  />
  <span
    class="pl-2 duration-500 opacity-0 peer-focus:opacity-100 -translate-y-5 peer-focus:translate-y-0"
    >Enter detail</span
  >
</div>


    